﻿@model List<QLDV.Models.CSD>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/QLDV/_Index.cshtml";
}

<link rel="stylesheet" href="@Url.Content("~/Content/themes/jorgchart/css/jquery.jOrgChart.css")"/>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/jorgchart/css/custom.css")"/>
<link href="@Url.Content("~/Content/themes/grayadmin/uiDialog/css/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<link href=""@Url.Content("~/Content/themes/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
    
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.fade.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Content/themes/jorgchart/prettify.js")"></script>
<script src="@Url.Content("~/Content/themes/jorgchart/jquery.jOrgChart.js")"> </script>
<script>
    function insertNewNode(orgNode, newNode) {
        $("#" + orgNode).append(newNode);
    }  
</script>

<div id="submenu">
    <div class="modules_left">
		<div class="module buttons">
			<a href="/csd/create" class="button" id ="createCSD" title=" Thêm Cơ sở đoàn"><small class ="icon plus"></small><span>Thêm Cơ sở Đoàn </span></a>
		</div>
        
	</div>
</div>

<div id="desc">
	<div class="body">	
        <div id="ajaxResult"></div>
        <div>
            <ul id ="org" style ="display:none"></ul>
            @{
                int? CSD = 0;
                string name;
            }
            @foreach (var item in @Model)
            {
                if (item.Id_CSDQL == null)
                {
                                <span id = @item.Id_CSD style ="display:none">@item.Ten</span>
                                <script>
                                    var id = @item.Id_CSD;
                                    var newNode = "<li id =" + id + ">"+ $("#"+id).text() + "</li>";
                                    $("#org").append(newNode);
                                </script>
                }
                else
                {
                    if (CSD != item.Id_CSDQL)
                    {
                        <span style = "display:none" id = @item.Id_CSD >@item.Ten</span>
                        <script>
                            var id = @item.Id_CSD;
                            var orgNode = @item.Id_CSDQL;
                            var name = $("#"+id).text();
                            var id_name = orgNode+ "_org";
                            var newNode = "<ul id=" + id_name +"><li id =" + id + ">"+ name +"</li></ul>";
                            insertNewNode(orgNode, newNode);
                        </script>
                        CSD = item.Id_CSDQL;
                    }
                    else
                    {
                        <span style ="display:none" id = @item.Id_CSD>@item.Ten</span>
                        <script>
                            var id = @item.Id_CSD;
                            var orgNode = @item.Id_CSDQL +"_org";
                            var name = $("#"+id).text();
                            var id_name = id+ "_org";
                            var newNode = "<li id =" + id + ">"+ name + "</li>";
                            insertNewNode(orgNode, newNode);
                        </script>
                        CSD = item.Id_CSDQL;
            
                    }
                }
            }
            <div id="chart" class="orgChart"></div>          
        </div>
    </div>
    <div class="clear"></div>
	<div id="body_footer">
		<div id="bottom_left"><div id="bottom_right">The bottom left/right rounded corner</div></div> 
	</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        $("#org").jOrgChart({
            chartElement: '#chart'
        });
        $('a.#createCSD').live("click", function (event) { addItem(this, event, '#bookInfo'); });
        $('.date').datepicker({ dateFormat: "mm/dd/yy", maxDate: '+1y', minDate: '+1d' });
    });
    function displayError(message, status) {
        var $dialog = $(message);
        $dialog
                .dialog({
                    modal: true,
                    title: status + ' Error',
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
        return false;
    };
    function addItem(tag, event, target) {
        event.preventDefault();
        var $url = $(tag).attr('href');
        var $title = $(tag).attr('title');
        var $dialog = $('<div></div>');
        $dialog.empty();
        $dialog
            .load($url)
			.dialog({
			    autoOpen: true
				, title: $title
				, width: 500
                , modal: true
				, minHeight: 200
                , show: 'fade'
                , hide: 'fade'
			});

    };


    
</script>

